<template>
    <div class="ph-color-picker-sv" :style="style" @click="onPick" ref="sv">
        <button class="ph-color-indicator" :style="istyle"></button>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, inject, Ref } from 'vue'
import { hsl2rgb  } from 'ph-color-util'

export default defineComponent({
    props:{
        h:{
            type:Number,default:0
        },
        s:{
            type:Number,default:0
        },
        b:{
            type:Number,default:0
        },
        isMobile:Boolean
    },
    setup(props,{emit}){
        const sv = ref<HTMLElement|null>(null)
        const ratio = 135/250
        const width = computed(()=>{
            return props.isMobile?document.documentElement.clientWidth:250
        })
        const height = computed(()=>{
            return width.value*ratio
        })

        const istyle=computed(()=>{
            const tx = props.s*width.value
            const ty = height.value-props.b*height.value
            return {
                transform:`translate(${tx}px,${ty}px)`
            }
        })
        const style = computed(()=>{
            const [r,g,b] = hsl2rgb(props.h,1,.5)
            return {
                backgroundColor: `rgb(${r},${g},${b})`
            }
        })

        const onPick = (e:MouseEvent)=>{
            if(!sv.value)return
            const {left,top} = sv.value.getBoundingClientRect()
            const s = (e.pageX - left)/width.value
            const v= (height.value - e.pageY + top)/height.value
            emit("pick",[props.h,s,v])
        }
        return {style,istyle,onPick,sv}
    }
})
</script>
<style lang="scss">
.ph-color-picker-sv{
    width: 100%;
    height: 1.5815rem;
    position: relative;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    &:before,
    &:after{
        content:"";
        left:0;
        top:0;
        right:0;
        bottom:0;
        position: absolute;
    }
    &:before{
        background-image: linear-gradient(90deg,#FFF,hsla(0,0%,100%,0));
    }
    &:after{
        background-image:linear-gradient(0deg,#000,transparent);
    }
    .ph-color-indicator{
        width: var(--ph-15);
        height: var(--ph-15);
        background-color: transparent;
        position: absolute;
        border-radius: 50%;
        left:-0.0984rem;
        top:-0.0984rem;
        border: none;
        box-shadow: 0 0 0.0984rem #000;
    }
}
</style>
